<style>
</style>
<template>
    <ly-page>
        <ly-navi type="back" title="综合实例1"></ly-navi>
        <ly-page-content>
            <ly-tip type="success">
                <p>
                   本表单还演示了,全局配置项搜索功能,可以在右上方搜索 '颜色选择器' 看看
                </p>
            </ly-tip>
            <ly-label-search></ly-label-search>
            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="125px" size="small">
                <el-form-item label="商品名称" prop="name">
                    <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
                    <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
                </el-form-item>


                <el-form-item label="长文本说明" prop="desc">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                    <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
                </el-form-item>
                <ly-form-group title="基础表单">
                    <el-form-item label="商品名称" prop="name">
                        <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
                        <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
                    </el-form-item>
                    <ly-form-line>
                        <el-form-item label="商品名称" prop="name">
                            <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
                            <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
                        </el-form-item>
                        <el-form-item label="商品名称" prop="name">
                            <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
                            <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
                        </el-form-item>
                    </ly-form-line>
                    <ly-form-line>
                        <el-form-item label="商品名称" prop="name">
                            <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
                            <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
                        </el-form-item>
                        <el-form-item label="商品名称" prop="name">
                            <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
                            <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
                        </el-form-item>
                    </ly-form-line>
                    <el-form-item label="长文本说明" prop="desc">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                        <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
                    </el-form-item>
                    <el-form-item label="字数限制" prop="desc">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                        <ly-text-count v-model="form.desc" :max="10"></ly-text-count>
                    </el-form-item>
                    <el-form-item label="前缀">
                        <el-input placeholder="请输入内容" v-model="form.prepend">
                            <template slot="prepend">Http://</template>
                        </el-input>
                        <ly-form-tip>请填商品分组</ly-form-tip>
                    </el-form-item>
                    <el-form-item label="后缀">
                        <el-input placeholder="请输入内容" v-model="form.append">
                            <template slot="append">.com</template>
                        </el-input>
                        <ly-form-tip>请填商品分组</ly-form-tip>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">立即提交</el-button>
                        <el-button>重置</el-button>
                    </el-form-item>
                </ly-form-group>
                <ly-form-group title="选择组件">
                    <el-form-item label="单选">
                        <el-select v-model="form.region" placeholder="请选择分组">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                        <ly-form-tip>请填商品分组</ly-form-tip>
                    </el-form-item>
                    <el-form-item label="多选">
                        <el-select size="small" v-model="form.select_multiple" multiple placeholder="选择搜索条件">
                            <el-option label="昵称" :value="1"></el-option>
                            <el-option label="手机号" :value="2"></el-option>
                            <el-option label="会员卡号" :value="3"></el-option>
                            <el-option label="会员卡号" :value="4"></el-option>
                            <el-option label="会员卡号" :value="5"></el-option>
                            <el-option label="会员卡号" :value="6"></el-option>
                            <el-option label="会员卡号" :value="7"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="前缀选择">
                        <el-input placeholder="请输入内容" v-model="form.prepend_select" class="input-with-select">
                            <el-select v-model="form.prepend_select_t" slot="prepend" placeholder="请选择">
                                <el-option label="餐厅名" value="1"></el-option>
                                <el-option label="订单号" value="2"></el-option>
                                <el-option label="用户电话" value="3"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="radio">
                        <el-radio-group v-model="form.radio">
                            <el-radio :label="3">备选项</el-radio>
                            <el-radio :label="6">备选项</el-radio>
                            <el-radio :label="9">备选项</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="radio按钮">
                        <el-radio-group v-model="form.radio1">
                            <el-radio-button label="上海"></el-radio-button>
                            <el-radio-button label="北京"></el-radio-button>
                            <el-radio-button label="广州"></el-radio-button>
                            <el-radio-button label="深圳"></el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="radio框">
                        <el-radio-group v-model="form.radio2">
                            <el-radio label="1" border>备选项1</el-radio>
                            <el-radio label="2" border>备选项2</el-radio>
                            <el-radio label="3" border>备选项3</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="checkbox">
                        <el-checkbox-group v-model="form.checkList">
                            <el-checkbox label="1">复选框 A</el-checkbox>
                            <el-checkbox label="2">复选框B</el-checkbox>
                            <el-checkbox label="3">复选框 C</el-checkbox>
                            <el-checkbox label="4" disabled>复选框 D</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="checkbox框">
                        <el-checkbox-group v-model="form.checkList">
                            <el-checkbox  label="1" border size="medium">选项 1</el-checkbox>
                            <el-checkbox  label="2" border size="medium">选项 2</el-checkbox>
                            <el-checkbox  label="3" border size="medium">选项 3</el-checkbox>
                            <el-checkbox  label="4" border size="medium">选项 4</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="数字选择">
                        <el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-date-picker
                                v-model="form.date"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-date-picker
                                v-model="form.date_range"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </ly-form-group>

                <ly-form-group title="其他组件">
                    <el-form-item label="时间范围">
                        <ly-checkbox-group v-model="form.m">
                            <ly-checkbox title="到店核销" description="无需发货" :label="1"></ly-checkbox>
                            <ly-checkbox title="到店核销" description="无需发货" :label="2"></ly-checkbox>
                        </ly-checkbox-group>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-switch v-model="form.delivery" active-text="开" inactive-text="关">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-rate v-model="form.rate"></el-rate>
                    </el-form-item>
                    <el-form-item label="颜色选择器">
                        <el-color-picker v-model="form.color" size="medium"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="进度条">
                        <el-progress :percentage="50"></el-progress>
                        <el-progress :percentage="100"></el-progress>
                        <el-progress :text-inside="true" :stroke-width="26" :percentage="50"
                                     status="exception"></el-progress>
                    </el-form-item>
                    <el-form-item label="进度环">
                        <el-progress type="circle" :percentage="0"></el-progress>
                        <el-progress :width="140" type="circle" :percentage="25"></el-progress>
                        <el-progress :width="120" type="circle" :percentage="100" status="success"></el-progress>
                        <el-progress :width="100" type="circle" :percentage="70" status="warning"></el-progress>
                        <el-progress :width="80" type="circle" :percentage="50" status="exception"></el-progress>
                    </el-form-item>
                </ly-form-group>
            </el-form>
        <ly-code-view>
            <pre v-pre>
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="125px" size="small">
    <el-form-item label="商品名称" prop="name">
        <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
        <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
    </el-form-item>
    <el-form-item label="长文本说明" prop="desc">
        <el-input type="textarea" v-model="form.desc"></el-input>
        <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
    </el-form-item>
    <ly-form-group title="基础表单">
        <el-form-item label="商品名称" prop="name">
            <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
            <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
        </el-form-item>
        <ly-form-line>
            <el-form-item label="商品名称" prop="name">
                <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
                <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
                <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
                <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
            </el-form-item>
        </ly-form-line>
        <ly-form-line>
            <el-form-item label="商品名称" prop="name">
                <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
                <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
                <el-input placeholder="请填写商品名称" v-model="form.name"></el-input>
                <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
            </el-form-item>
        </ly-form-line>
        <el-form-item label="长文本说明" prop="desc">
            <el-input type="textarea" v-model="form.desc"></el-input>
            <ly-form-tip>请填写商品名称，字数不限</ly-form-tip>
        </el-form-item>
        <el-form-item label="字数限制" prop="desc">
            <el-input type="textarea" v-model="form.desc"></el-input>
            <ly-text-count v-model="form.desc" :max="10"></ly-text-count>
        </el-form-item>
        <el-form-item label="前缀">
            <el-input placeholder="请输入内容" v-model="form.prepend">
                <template slot="prepend">Http://</template>
            </el-input>
            <ly-form-tip>请填商品分组</ly-form-tip>
        </el-form-item>
        <el-form-item label="后缀">
            <el-input placeholder="请输入内容" v-model="form.append">
                <template slot="append">.com</template>
            </el-input>
            <ly-form-tip>请填商品分组</ly-form-tip>
        </el-form-item>
        <el-form-item>
            <el-button type="primary">立即提交</el-button>
            <el-button>重置</el-button>
        </el-form-item>
    </ly-form-group>
    <ly-form-group title="选择组件">
        <el-form-item label="单选">
            <el-select v-model="form.region" placeholder="请选择分组">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <ly-form-tip>请填商品分组</ly-form-tip>
        </el-form-item>
        <el-form-item label="多选">
            <el-select size="small" v-model="form.select_multiple" multiple placeholder="选择搜索条件">
                <el-option label="昵称" :value="1"></el-option>
                <el-option label="手机号" :value="2"></el-option>
                <el-option label="会员卡号" :value="3"></el-option>
                <el-option label="会员卡号" :value="4"></el-option>
                <el-option label="会员卡号" :value="5"></el-option>
                <el-option label="会员卡号" :value="6"></el-option>
                <el-option label="会员卡号" :value="7"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="前缀选择">
            <el-input placeholder="请输入内容" v-model="form.prepend_select" class="input-with-select">
                <el-select v-model="form.prepend_select_t" slot="prepend" placeholder="请选择">
                    <el-option label="餐厅名" value="1"></el-option>
                    <el-option label="订单号" value="2"></el-option>
                    <el-option label="用户电话" value="3"></el-option>
                </el-select>
            </el-input>
        </el-form-item>
        <el-form-item label="radio">
            <el-radio-group v-model="form.radio">
                <el-radio :label="3">备选项</el-radio>
                <el-radio :label="6">备选项</el-radio>
                <el-radio :label="9">备选项</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="radio按钮">
            <el-radio-group v-model="form.radio1">
                <el-radio-button label="上海"></el-radio-button>
                <el-radio-button label="北京"></el-radio-button>
                <el-radio-button label="广州"></el-radio-button>
                <el-radio-button label="深圳"></el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="radio框">
            <el-radio-group v-model="form.radio2">
                <el-radio label="1" border>备选项1</el-radio>
                <el-radio label="2" border>备选项2</el-radio>
                <el-radio label="3" border>备选项3</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="checkbox">
            <el-checkbox-group v-model="form.checkList">
                <el-checkbox label="1">复选框 A</el-checkbox>
                <el-checkbox label="2">复选框B</el-checkbox>
                <el-checkbox label="3">复选框 C</el-checkbox>
                <el-checkbox label="4" disabled>复选框 D</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="checkbox框">
            <el-checkbox-group v-model="form.checkList">
                <el-checkbox  label="1" border size="medium">选项 1</el-checkbox>
                <el-checkbox  label="2" border size="medium">选项 2</el-checkbox>
                <el-checkbox label="3" border size="medium">选项 3</el-checkbox>
                <el-checkbox  label="4" border size="medium">选项 4</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="数字选择">
            <el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="时间">
            <el-date-picker
                    v-model="form.date"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="时间范围">
            <el-date-picker
                    v-model="form.date_range"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
    </ly-form-group>

    <ly-form-group title="其他组件">
        <el-form-item label="时间范围">
            <ly-checkbox-group v-model="form.m">
                <ly-checkbox title="到店核销" description="无需发货" :label="1"></ly-checkbox>
                <ly-checkbox title="到店核销" description="无需发货" :label="2"></ly-checkbox>
            </ly-checkbox-group>
        </el-form-item>
        <el-form-item label="时间范围">
            <el-switch v-model="form.delivery" active-text="开" inactive-text="关">
            </el-switch>
        </el-form-item>
        <el-form-item label="时间范围">
            <el-rate v-model="form.rate"></el-rate>
        </el-form-item>
        <el-form-item label="颜色选择器">
            <el-color-picker v-model="form.color" size="medium"></el-color-picker>
        </el-form-item>
        <el-form-item label="进度条">
            <el-progress :percentage="50"></el-progress>
            <el-progress :percentage="100"></el-progress>
            <el-progress :text-inside="true" :stroke-width="26" :percentage="50"
                         status="exception"></el-progress>
        </el-form-item>
        <el-form-item label="进度环">
            <el-progress type="circle" :percentage="0"></el-progress>
            <el-progress width="140" type="circle" :percentage="25"></el-progress>
            <el-progress width="120" type="circle" :percentage="100" status="success"></el-progress>
            <el-progress width="100" type="circle" :percentage="70" status="warning"></el-progress>
            <el-progress width="80" type="circle" :percentage="50" status="exception"></el-progress>
        </el-form-item>
    </ly-form-group>
</el-form>
            </pre>
        </ly-code-view>
        </ly-page-content>
    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    form: {
                        step:1,
                        num: 1,
                        select_multiple: [],
                        checkList: [],
                        color: '#FE707D'
                    },
                    rules: {
                        name: {
                            required: true,
                            message: '请输入活动名称',
                            trigger: 'blur'
                        },
                        desc: {
                            required: true,
                            message: '请输入活动名称',
                            trigger: 'blur'
                        }


                    }
                }
            },
            mounted: function () {

            },
            methods: {}
        }
    })
</script>